<template>
  <!-- 发布资讯页面 -->
  <div>
    <!-- // -->
    <el-form
      ref="ruleForm"
      :model="articleFormData"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
    >
      <div
        class="left"
        style="width: 65%; display: inline-block; vertical-align: top"
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model="articleFormData.title" />
        </el-form-item>

        <el-form-item label="分类" prop="categoryId">
          <el-select
            v-model.number="articleFormData.categoryId"
            placeholder="请选择"
          >
            <el-option
              v-for="(item) in categoryData.filter(
                (item) => !item.parentId
              )"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </div>

      <!-- 右边 图片上传 -->
      <div
        style="
          display: inline-block;
          vertical-align: top;
          margin-left: 20px;
          padding: 10px 0;
        "
      >
        封面
      </div>

      <div class="right" style="display: inline-block;text-align:center;">
        <el-upload
          class="avatar-uploader"
          :action="uploadFileURL"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="articleFormData.cover" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
        <div>图片大小不能超过 3MB!</div>
      </div>

      <!-- 主要内容 -->
      <div class="main-content" style="margin: 30px 0">
        <el-form-item label="正文" prop="content">
          <Tinymce v-model="articleFormData.content" :height="240" />
        </el-form-item>
      </div>

      <div class="submit">
        <el-form-item>
          <el-button type="primary" @click="submitForm()">发布</el-button>
          <el-button @click="btnBack()">返回</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
// 引入组件
import Tinymce from '@/components/Tinymce'

import { get, post } from '@/utils/request'
// 引入文件上传路径 和 文件预览的路径
import { showFileURL, uploadFileURL } from '@/utils/config'

export default {
  components: {
    Tinymce
  },

  data() {
    return {

      //
      imageUrl: '',
      // 上传文件的服务器地址
      uploadFileURL,
      //
      articleFormData: {
        // 标题
        title: '',
        // 栏目编号
        categoryId: '',
        // 图片地址
        cover: '',
        //
        content: ''
      },

      // 栏目
      categoryData: [],

      // 表单验证
      rules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2到 20 个字符', trigger: 'blur' }
        ],
        categoryId: [
          { required: true, message: '请选择栏目', trigger: 'change' }
        ],
        content: [{ required: true, message: '请输入内容', trigger: 'blur' }]
      }
    }
  },
  computed: {},
  created() {
    this.getAllCategory()
  },
  mounted() {},
  methods: {
    // 返回按钮
    btnBack() {
      this.$router.go(-1)
    },
    // 提交表单 数据
    async submitForm() {
      this.$refs['ruleForm'].validate(async(valid) => {
        if (valid) {
          const data = await post('/article/saveOrUpdate', this.articleFormData)

          // 提示信息
          if (data.status == 200) {
            this.$message({
              type: 'success',
              message: data.message
            })

            // 跳转回 文章页面
            this.$router.push({
              path: '/admin/info/article/List'
            })
          } else {
            this.$message({
              type: 'error',
              message: data.message
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    // 上传图片 成功后 回调函数
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)

      // 上传成功之后 更新articleFormData.cover的路径
      this.articleFormData.cover = showFileURL + res.data.id
    },
    // 上传之前 要 做一些限制
    beforeAvatarUpload(file) {
      const isLt3M = file.size / 1024 / 1024 < 3

      if (!isLt3M) {
        this.$message.error('上传头像图片大小不能超过 3MB!')
      }
    },

    // 获取全部栏目
    async getAllCategory() {
      // 请求数据
      const res = await get('/category/findAll')
      this.categoryData = res.data
    }
  }
}
</script>
<style scoped>
</style>
